<template>
  <div class="section_common">
    <div class="main">
      <el-form ref="form" label-width="110px">
        <el-form-item label="招聘区域" required>
          <el-radio-group v-model="area" @change="selBossLeader">
            <el-radio label="WG" >深圳</el-radio>
            <el-radio label="HF" >合肥</el-radio>
            <el-radio label="WH" >武汉</el-radio>
          </el-radio-group>
          <!--<el-radio v-model="area" label="WG">深圳</el-radio>
          <el-radio v-model="area" label="HF">合肥</el-radio>
          <el-radio v-model="area" label="WH">武汉</el-radio>-->
        </el-form-item>
        <!--<el-form-item label="部门" required>
          <el-cascader
            size="mini"
            v-model="value"
            :options="options"
            :clearable="true"
            @change="handleChange"
          ></el-cascader>
        </el-form-item>-->
        <el-form-item label="招聘部门" required>
          <el-cascader
                  size="mini"
                  ref="refHandle"
                  v-model="dept"
                  :options="depts"
                  :clearable="true"
                  @change="deptChange"
                  :props="{ checkStrictly: true }"
                  filterable
          ></el-cascader>
        </el-form-item>

        <el-form-item label="招聘岗位" required><!--multiple-->
          <el-select v-model="oposId" :filterable="true" size="mini" placeholder="请选择" @change="selectoPos">
            <el-option v-for="(item,index) in postField" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
       <!-- <el-form-item label="岗位" required>
          <el-input v-model="oposName" size="mini" readonly @focus="showPos = true"></el-input>
          <van-popup v-model="showPos" position="bottom">
            <van-picker
                    show-toolbar
                    :columns="postField"
                    @confirm="selectoPos"
                    @cancel="showPos = false"
            />
          </van-popup>
        </el-form-item>-->
        <el-form-item label="在职人数" required>
          <el-input v-model="totalNum" size="mini"></el-input>
        </el-form-item>

        <el-form-item id="unfinsh" label="未完成人数" required style="display: none">
          <el-input v-model="unfinshNum" size="mini" readonly></el-input>
        </el-form-item>

        <el-form-item label="新增人数" required>
          <el-input v-model="needNum" size="mini"></el-input>
        </el-form-item>
        <!--<el-form-item label="招聘原因" required>
          <el-select v-model="reason" size="mini" placeholder="请选择原因">
            <el-option label="新增" value="新增"></el-option>
            <el-option label="离职补充" value="离职补充"></el-option>
          </el-select>
        </el-form-item>-->

        <el-form-item label="招聘原因" required>
          <el-radio v-model="reason" label="新增">新增</el-radio>
          <el-radio v-model="reason" label="离职补充">离职补充</el-radio>
          <el-radio v-model="reason" label="调动补充">调动补充</el-radio>
        </el-form-item>

        <el-form-item label="申请人员" required>
          <el-select v-model="applicant" filterable size="mini" placeholder="请选择">
            <!--<el-option value="" selected disabled>请选择</el-option>-->
            <el-option v-for="item in applicantList" :key="item.userId" :label="item.name" :value="item.userId" selected="selected">{{item.name}}</el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="期望到岗时间" required>
          <el-date-picker
            size="mini"
            v-model="exceptTime"
            type="date"
            placeholder="选择日期"
            :editable="false"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="岗位职责" required>
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 6}" v-model="responsibility" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="任职要求" required>
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 6}" v-model="specification" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="其他说明">
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 6}" v-model="other" size="mini"></el-input>
        </el-form-item>
        <!--<el-form-item label="上级领导" required>
          <el-select v-model="leader" filterable size="mini" placeholder="请选择" @change="changeLeader">
            <el-option value="" selected disabled>请选择</el-option>
            <el-option v-for="item in leaderList" :key="item.name" :label="item.name" :value="item.userId" selected="selected">{{item.name}}</el-option>
          </el-select>
        </el-form-item>-->
        <!--<el-form-item label="附件" required>
          <el-upload
            action="#"
            class="upload-demo"
            :on-change="handleChange"
            :file-list="fileList"
            :multiple="false"
            :limit="1"
            list-type
          >
            <el-button size="mini" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip"></div>
          </el-upload>
        </el-form-item>-->

        <el-form-item label="相关附件">
          <input id="file" class="file-upload-input" ref="inputer" type="file" accept="*/*" @change="afterRead()">
        </el-form-item>
        <!--<div class="upload_area">
          <label for="file">附件</label>
        </div>-->

        <div class="upload_area" v-show="spshow">
          <van-steps direction="vertical" :active="active" active-icon="checked" active-color="#38f">
            <!--<van-step>
              <h3>{{leaderName}}</h3>
              <van-image width="60" height="60" :src="leaderImg"/>
            </van-step>-->

            <van-step v-if="oneShow">
              <h3>一级审批</h3>
              <van-image v-for="(item,index) in onespusers" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
              </van-image>
            </van-step>

            <van-step v-if="twoShow">
              <h3>二级审批</h3>
              <van-image v-for="(item,index) in twospusers" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
              </van-image>
            </van-step>

            <van-step v-if="threeShow">
              <h3>三级审批</h3>
              <van-image v-for="(item,index) in threespusers" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
              </van-image>
            </van-step>

            <van-step v-if="yxshow">
              <h3>{{yxleader}}</h3>
              <van-image width="60" height="60" :src="yxleaderImg"></van-image>
            </van-step>
            <van-step v-if="hrshow">
              <h3>{{hrleader}}</h3>
              <van-image width="60" height="60" :src="hrleaderImg"/>
            </van-step>

            <van-step>
              <h3>{{bossleader}}</h3>
<!--              <van-image width="60" height="60" :src="boss1leaderImg" style="margin-right: 20px"/>-->
              <van-image width="60" height="60" :src="boss2leaderImg"/>
            </van-step>
          </van-steps>
        </div>

        <el-form-item>
          <el-button v-bind:disabled="isShow" type="primary" size="mini" @click="submitPost" style="margin:0 auto;"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import { Image as VanImage ,Toast,Picker,Popup,Dialog} from 'vant';
  Vue.use(Picker);
  Vue.use(Popup);
  Vue.use(VanImage);
export default {
  data() {
    return {
      area:"",
      odeptId:"",
      odeptName:"",//部门名称
      //岗位名称
      oposName:"",
      oposId:"",
      totalNum:"",
      unfinshNum:"",
      needNum:"",
      exceptTime:"",
      english:"",
      requiredDegree:"",
      requiredSex:"",
      responsibility:"",
      specification:"",
      other:"",
      leader:"",
      leaderList:[],
      applicant:"",
      applicantList:[],

      postField:[],

      reason:"新增",
      nowUser: '',
      title: "招聘需求申请",
      fileList: [{fileId:""}],
      fileName:"",
      fileUrl:"",
      addApplication: '/mobiles/addApplication',
      uploadImageUrl: '/mobiles/uploadFile',
      treeShow: false,
      currDept: {},
      treeData: [],
      posList:[],
      showPos:false,

      date:"",
      exceptshow:false,

      dept: [],
      depts: [],

      spshow:false,
      active:"-1",//步骤索引,从0开始
      leaderName:"",//直接领导
      hrleader:"方先梅",//hr经理
      bossleader:"胡仁华",//上级领导
      leaderImg:"",
      hrleaderImg:"",
      boss1leaderImg:"",
      boss2leaderImg:"",
      hrshow:true,
      isShow:false,
      yxshow:false,
      yxleader:"徐朕鸿",
      yxleaderImg:"",

      oneShow:false,
      twoShow:false,
      threeShow:false,
      onespusers:[],
      twospusers:[],
      threespusers:[],

    };
  },
  created() {
    var jobnumid=JSON.parse(localStorage.getItem('userInfo')).jobNumId;
    if (jobnumid.indexOf("HF")!=-1){
      this.area="HF"
    }else if (jobnumid.indexOf("WH")!=-1){
      this.area="WH"
    }else {
      this.area="WG"
    }
    this.nowUser=JSON.parse(localStorage.getItem('userInfo')).userId;
    this.isPermissionqx();
    this.selDept();
    this.selApplicant();
    this.selBossLeader();
  },
  activated() {
    this.isPermissionqx();
  },

  methods: {
    //只有组长以上权限才可以进行招聘需求的申请，判断当前用户是否有权限
    isPermissionqx(){
      this.$https.post('/mobiles/isPermissionqx', {
        userId:this.nowUser,
        notRname:"组员"
      }).then((res)=>{
        if (res.data.code=='500'){
          //this.code=500;
          //this.$toast(res.data.message);
          Dialog.alert({
            message: res.data.message,
          }).then(() => {
            this.$router.go(-1);
          });
        }

      }).catch(err => {
        console.log(err);
      });
    },

    formatDate(date) {
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    },
    onConfirm(date) {
      this.exceptshow = false;
      this.exceptTime = this.formatDate(date);
    },

    //初始化选择部门
    selDept(){
      this.$https.post('/mobiles/selPCDept').then((res)=>{
        //debugger
        //console.log(res.data.data)

        this.depts=this.formatCsData(res.data.data);
      }).catch(err => {
        console.log(err);
      });
    },
    //格式化级联下拉框的数据
    formatCsData(data){
      for (var i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          data[i].children = undefined
        } else {
          this.formatCsData(data[i].children)
        }
      }
      return data
    },

    //点击获得选中的部门
    deptChange(value){
      //console.log(value)
      this.odeptId=value[value.length-1];
      this.getPosById(value[value.length-1])
      this.$refs.refHandle.dropDownVisible = false
      this.selectLeader();//选择三级审批人
      this.selBossLeader();//选择人资经理一级总经理，副总经理
    },


    //格式化xialakuang
    formatLacation(data,curr,foo,id){
      if(data){
        //console.log(foo)
        for(let i=0;i<data.length;i++){
          //console.log(data[i])
          curr.push({
            label:data[i][foo],
            value:data[i][id],
          })
        }
        //console.log(curr)
      }
    },
    //根据部门id获取相关岗位
    getPosById(id){
      this.postField=[];
      this.oposId="";
      //console.log(id)
      this.$https.post('/mobiles/selPos', {
        deptId:id,
      }).then((res)=>{
        /*this.posList=res.data;
        for(var i=0;i<this.posList.length;i++){
          this.postField.push(this.posList[i].name);
        }*/
        this.formatLacation(res.data,this.postField,'name','id');
      }).catch(err => {
        console.log(err);
      })
    },
    //点击选中的岗位
    selectoPos(value){
      this.oposId=value;
      this.showPos=false;

      //this.judgeUnfinsh();//判断当前岗位是否有未完成的招聘人数
      this.getTotalNum();//查找当前岗位的在职人数

    },

    //根据选择的部门和岗位查找是否是未完成的招聘需求，用来做提醒
    judgeUnfinsh(){
      this.$https.post('/mobiles/judgeUnfinsh', {
        area:this.area,
        deptId:this.odeptId,
        posId:this.oposId,
      }).then((res)=>{
        if (res.data!=0){
          document.getElementById("unfinsh").style.display="";
          this.unfinshNum=res.data;
        }

      }).catch(err => {
        console.log(err);
      })
    },

    getTotalNum(){
      this.$https.post('/mobiles/getTotalNum', {
        deptId:this.odeptId,
        posId:this.oposId,
      }).then((res)=>{
        if (res.data!=0){
          this.totalNum=res.data;
        }
      }).catch(err => {
        console.log(err);
      })
    },

    //查找对应的下属用户可作为申请人
    selApplicant(){
      this.applicantList=[];
      this.applicant="";
      this.$https.post('/mobiles/selApplicantByUser', {
        userId:this.nowUser
      }).then((res)=>{
        // debugger
        this.applicantList=res.data.data;
        this.applicant=res.data.data[0].userId;
      }).catch(err => {
        console.log(err);
      })
    },

    //根据选择的部门和岗位查找对应的领导
    selectLeader(){
      this.leaderList=[];
      this.leader="";
      this.$https.post('/mobiles/selLeader', {
        deptId:this.odeptId,
        posId:this.oposId,
        userId:this.nowUser,
        area:this.area
      }).then((res)=>{
        //this.leaderList=res.data.data;
        //展示审批流程
        this.spshow=true;
        /*this.leader=this.leaderList[this.leaderList.length-1].userId;
        this.leaderName=this.leaderList[this.leaderList.length-1].name;
        this.leaderImg=this.leaderList[this.leaderList.length-1].avatar;*/
        if (res.data.onespusers && res.data.onespusers.length>0){
          this.oneShow=true;
          this.onespusers=res.data.onespusers;
        }else{
          this.oneShow=false;
          this.onespusers=[];
        }
        if (res.data.twospusers && res.data.twospusers.length>0){
          this.twoShow=true;
          this.twospusers=res.data.twospusers;
        }else{
          this.twoShow=false;
          this.twospusers=[];
        }
        if (res.data.threespusers && res.data.threespusers.length>0){
          this.threeShow=true;
          this.threespusers=res.data.threespusers;
        }else{
          this.threeShow=false;
          this.threespusers=[];
        }
        //查找人资经理和总经理进行审批
        //this.selBossLeader();

      }).catch(err => {
        console.log(err);
      })
    },

    /*changeLeader(){
      debugger
      for (var i = 0; i < this.leaderList.length; i++) {
        if (this.leader==this.leaderList[i].userId){
          this.leaderImg=this.leaderList[i].avatar;
          this.leaderName=this.leaderList[i].name;
        }
      }
    },
*/
    selBossLeader(){
      this.$https.post('/mobiles/selBossLeader', {
        nowUser:this.nowUser,
        area:this.area,
        deptId:this.odeptId,
      }).then((res)=>{
        this.spshow=true;
        var bossList=res.data.data;
        this.hrleaderImg=bossList[0].avatar;
        this.hrleader=bossList[0].name;
        // this.boss1leaderImg=bossList[1].avatar;
        this.boss2leaderImg=bossList[1].avatar;
        if (bossList.length>2){
          this.yxshow=true;
          this.yxleader=bossList[2].name;
          this.yxleaderImg=bossList[2].avatar;
        }
      }).catch(err => {
        console.log(err);
      })
    },

    // 返回
    goBack() {
      this.$router.go(-1);
    },
    // 提交
    submitPost() {
      if (!this.isNull()) return false;
      /*var s = '';
      s = this.getImageUrl(s);*/
      // on confirm
      this.isShow=true;
      this.$https.post(this.addApplication, {
        area:this.area,
        nowUser:this.nowUser,
        deptId:this.odeptId,
        posId:this.oposId,
        totalNum:this.totalNum,
        unfinshNum:this.unfinshNum,
        needNum:this.needNum,
        exceptTime:this.exceptTime,
        english:this.english,
        requiredDegree:this.requiredDegree,
        requiredSex:this.requiredSex,
        responsibility:this.responsibility,
        specification:this.specification,
        other:this.other,
        // leader:this.leader,
        applicant:this.applicant,
        reason: this.reason,
        attachment:this.fileList[this.fileList.length-1].fileId,

      }).then(res => {
        res;
        Toast("申请成功");
        this.isShow=true;
        this.$router.go(-1);
      }).catch(err => {
        console.log(err)
      });
    },
    //判断相关数据是否为空
    isNull() {
      if (this.odeptId == '') {
        this.$toast("部门不能为空");
        return false;
      }
      if (this.oposId=='') {
        this.$toast("岗位不能为空");
        return false;
      }
      if (this.totalNum==''){
        this.$toast("在职人数不能为空");
        return false
      }
      if (this.needNum==''){
        this.$toast("新增人数不能为空");
        return false
      }
      if (this.responsibility==''){
        this.$toast("岗位职责不能为空");
        return false
      }
      if (this.specification==''){
        this.$toast("任职要求不能为空");
        return false
      }
      /*if (this.leader==''){
        this.$toast("上级领导不能为空");
        return false
      }*/
      return true;
    },

    //监听上传变动
    afterRead() {
      let formData = new FormData();
      //console.log(this.$refs.inputer);
      var fs=this.$refs.inputer.files;
      for (let i = 0; i < fs.length; i++) {
        formData.append("fileList", fs[i]);  //文件上传处理
      }
      this.$https.post(this.uploadImageUrl,formData,{
        timeout: 0, //无超时时间
        headers: { "Content-Type": "multipart/form-data" }
      }).then(res => {
        this.fileList=res.data.data;
        this.fileName=this.fileList[this.fileList.length-1].fileName;
        this.fileUrl=this.fileList[this.fileList.length-1].filePath;
        Toast("上传完成");
      }).catch(err => {
        console.log(err);
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  justify-items: center;
  margin: 0 auto;
  .el-form {
    padding-right: 10px;
    .el-form-item {
      .el-form-item__label {
        line-height: 16px;
      }
      margin-bottom: 5px;
    }
  }
}
</style>